<template>
  <div class="vx-payeelist">
    <ui-input placeholder="卡号/名称/银行" v-model="searchValue"> <i slot="suffix" class="ui-input__icon ui-icon-search"></i> </ui-input>
    <div class="filters" flex>
      <div class="filter-used">
        <ui-popover placement="bottom" width="100" trigger="hover">
          <div class="filter-used-items">
            <div
              @click="query.used = filterUsedItem"
              v-for="filterUsedItem in ['全部', '最近', '科蓝银行', '数据中心']"
              :key="filterUsedItem"
              class="filter-used-item"
            >
              {{ filterUsedItem }}
            </div>
          </div>
          <div slot="reference">{{ query.used }}<i class="ui-icon-caret-bottom"></i></div>
        </ui-popover>
      </div>
    </div>
    <vx-acronym-index :list="abcItemList" class="bankList-select" v-loading="isLoading">
      <div class="top">
        <section v-for="(item, index) in payeeBooksList" :key="'i' + index" class="section-class payer-border">
          <p
            v-for="(res, indexs) in item.list"
            :key="indexs"
            :class="[JSON.stringify(activeValue) == JSON.stringify(res) ? 'border-class active' : 'border-class']"
            @click="queryPayeeNameBookWay(res)"
            :id="res.firstLetter"
          >
            <ui-row>
              <ui-col :span="6">
                <img :src="getImgUrl(res.url)" alt="" class="img-class" />
              </ui-col>
              <ui-col :span="18" class="col-class h-show">
                <span class="name-class">
                  {{ res.name }}<br />
                  {{ res.acNo | formatStringFilter }}
                </span>
              </ui-col>
              <ui-col :span="18" class="col-class h-none">
                <span class="name-class"> {{ res.name }}<br /> </span>
                <span class="acNo-class"> {{ res.bankName }}(尾号{{ res.acNo | limitLenFilter(-4) }}) </span>
              </ui-col>
            </ui-row>
            <ui-row class="first-title h-show">
              {{ res.address }}
            </ui-row>
          </p>
        </section>
        <div v-show="!payeeBooksList[0].list.length && !isLoading" class="noData">暂无数据</div>
      </div>
    </vx-acronym-index>
  </div>
</template>

<script>
import transferRemitApi from '@/api/transferRemit';
export default {
  name: 'vx-payeelist',
  data() {
    return {
      searchValue: '', // 搜索值
      query: {
        used: '全部',
        group: '',
      },
      payeeBooksList: [{ list: [] }],
      activeValue: '',
      searchList: [],
      isLoading: false,
    };
  },
  watch: {
    searchValue(val) {
      if (val == '') {
        this.getPayeeBookList();
      } else {
        this.payeeBooksList[0].internal = [];
        this.payeeBooksList[0].list = this.searchList.filter((item) => {
          return item.acNo.indexOf(val) != -1 || item.PayeeAcName.indexOf(val) != -1 || item.DepositBank.indexOf(val) != -1;
        });
      }
    },
    query: {
      handler: 'getPayeeBookList',
      deep: true,
    },
  },
  created() {
    this.getPayeeBookList();
  },
  computed: {
    abcItemList() {
      return this.payeeBooksList[0].list.map((item) => {
        return {
          name: item.name,
          height: this.activeValue == item ? 115 : 82,
        };
      });
    },
  },
  methods: {
    // 获取收款名册列表
    async getPayeeBookList() {
      try {
        this.isLoading = true;
        let res = await transferRemitApi.getPayeeBookList(this.searchInfo);
        this.payeeBooksList = res.data;
        this.searchList = res.data[0].list;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isLoading = false;
      }
    },
    // 选择之后赋值
    queryPayeeNameBookWay(val) {
      this.isLoading = true;
      this.activeValue = val;
      this.$emit('payeeInfo', val);
      this.isLoading = false;
    },
    // 获取图片地址
    getImgUrl(icon) {
      return require('@/assets/image/transferRemit/' + icon);
    },
  },
};
</script>

<style lang="scss">
.vx-payeelist {
  .ui-input__icon {
    color: $color-text-sub;
    font-size: 16px;
  }
  .bankList-select {
    position: relative;
    .bank-first-height {
      display: block;
    }
    .top {
      line-height: 20px;
      font-size: $s14;
      .recent,
      .internal {
        padding: 5px;
        &::before {
          content: '|';
        }
      }
      .section-class {
        .title-class {
          padding: 10px 0;
        }

        .border-class {
          border: 1px solid $color-border-11;
          border-radius: 4px;
          background: $color-bg-default;
          height: 70px;
          margin-bottom: 10px;
          cursor: pointer;
          .h-none {
            display: block;
          }

          .h-show {
            display: none;
          }

          .img-class {
            width: 40px;
            height: 40px;
            margin-top: 15px;
            margin-left: 10px;
          }

          .col-class {
            margin-top: 15px;
            padding: 0 10px;
            .name-class {
              font-size: $s14;
              font-weight: $font-weight-semibold;
              color: $color-text-main;
            }

            .acNo-class {
              font-size: $s12;
              color: rgb(204, 204, 204);
            }
          }

          .col-right-class {
            margin-top: 10px;
            margin-left: 20px;
            line-height: 25px;

            .name-class {
              font-size: $s12;
            }

            .acNo-class {
              font-size: $s12;
            }
          }
        }
        .active {
          border: 1px solid $color-border-9;
          border-radius: 4px;
          background: $color-bg-card;
          height: auto;
          padding-bottom: 15px;
          margin-bottom: 10px;
          color: $color-text-primary;

          .h-show {
            display: block;
            .name-class {
              color: $color-text-primary;
            }
          }

          .h-none {
            display: none;
          }
          .col-class {
            .name-class {
              font-size: $s14;
              font-weight: $font-weight-semibold;
            }

            .acNo-class {
              font-size: $s12;
              color: rgb(204, 204, 204);
            }
          }
        }
        .first-title {
          font-size: $s12;
          margin-left: 20px;
          margin-top: 10px;
          line-height: 18px;

          .btn-select {
            width: 30px;
            background: #f1f1f1;
            margin-top: -30px;
            margin-left: 81%;
            padding: 0 5px;
            border-bottom-left-radius: 4px;
            border-top-right-radius: 4px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .filters {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    color: $color-info;
    font-size: 14px;
    .filter-used {
      cursor: pointer;
    }
    .filter-group {
      margin-left: 100px;
    }
  }
}
.filter-used-items {
  .filter-used-item {
    &:not(:last-child) {
      margin-bottom: 5px;
    }
    cursor: pointer;
    &:hover {
      background: $color-bg;
    }
  }
}
.filter-group-items {
  .filter-group-item {
    &:not(:last-child) {
      margin-bottom: 5px;
    }
    cursor: pointer;
    &:hover {
      background: $color-bg;
    }
  }
}
</style>
